<template>
  <!-- 我发的红包 -->
  <!-- Token、时间、金额、已抢信息 -->
  <b-container id="my-package" class="page-content">
    <p
      class="text-center"
      style="font-size:15px;color:#333;"
      v-if="loadding == false && !packages.length"
    >
      还没有发红包，快发一个红包分享给你的朋友吧！
      <b-button
        class="send-btn"
        variant="warning"
        @click="goToSendPackage()"
        style="margin-top:20px"
      >
        我要发红包
      </b-button>
    </p>
    <p
      class="text-center"
      style="font-size:13px;color:#ccc;"
      v-if="packages.length"
    >
      <b-icon icon="info-circle-fill"></b-icon>
      &nbsp;&nbsp;点击分享按钮，把红包分享给你的好友吧！
    </p>
    <div class="list">
      <div
        class="item"
        v-for="item in packages"
        :key="item.shareCode"
        @click.stop="goDetail(item)"
      >
        <div class="logo">
          <my-img
            :src="'img/token-' + item.currency.toLowerCase() + '.png'"
            default-img="img/token-sero.png"
            class="img-fluid"
          ></my-img>
        </div>
        <div class="info">
          <div class="detail">
            <div class="nums">
              已领取 {{ item.openNums }}/{{ item.nums }} 个
            </div>
            <div class="money">
              <span v-if="item.typ == 0" class="icon-ping">拼</span>
              剩
              <span class="remain">
                {{ item.remainAmount / 10 ** (item.decimal || 0) }}
              </span>
              /{{ item.money / 10 ** (item.decimal || 0) }}
              {{ item.currency }}
            </div>
          </div>
          <div class="meta">
            <div class="time">{{ item.created | formatDatetime }}</div>
            <div class="tool">
              <b-icon
                icon="reply"
                @click.stop.prevent="sharePackage(item)"
              ></b-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </b-container>
</template>
<script>
export default {
  methods: {
    goToSendPackage() {
      this.$router.push({ name: "Send" });
    },
    goDetail(item) {
      this.$router.push({
        name: "Detail",
        query: {
          code: item.shareCode,
          currency: item.currency,
          from: "MyPackage",
        },
      });
    },
    mySendPackages() {
      this.loadding = true;
      this.callMethod("mySendPackageList", [0, 50]).then(
        ({ total, sendPackages }) => {
          if (total > 0) {
            this.$root.changeNavTitle(`我发的红包（${total}）`);
          }
          console.log("sero:mySendPackages   ", total, sendPackages);
          this.loadding = false;
          this.packages = sendPackages;
        }
      );
    },
    sharePackage(item) {
      this.$router.push({
        name: "SendResult",
        query: { code: item.shareCode, currency: item.currency },
      });
    },
  },
  created() {
    this.$root.changeNavTitle("我发的红包");
    this.mySendPackages();
  },
  data() {
    return {
      packages: [],
      loadding: true,
    };
  },
};
</script>
<style>
#my-package .list {
  border-bottom: 1px #eee solid;
}
#my-package .list .item {
  display: flex;
  border-top: 1px #eee solid;
  padding: 15px 0px;
}
#my-package .list .item .logo {
  width: 38px;
  padding-right: 15px;
  border-radius: 5px;
}
#my-package .list .item .info {
  display: flex;
  flex: 1;
  justify-content: space-between;
  flex-direction: column;
}
#my-package .list .item .remain {
  display: inline-block;
  max-width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 5px;
}
#my-package .list .item .info > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#my-package .list .item .info .money {
  display: flex;
}
#my-package .list .item .info .detail {
  color: #282828;
  font-size: 16px;
}
#my-package .list .item .info .time {
  color: #cbcbcb;
  font-size: 14px;
}
#my-package .list .item .info .tool {
  font-size: 20px;
}
</style>
